<script lang="ts" setup>
/**
 * @ClassName SvgIcon
 * @description svg图标组件
 * @Author xuyizhuo
 * @Date 2025/7/21 22:27
 * @example
 */
/** svg图标组件参数 */
export interface SvgIconProps {
    /** xlink:href属性值前的前缀 */
    prefix?: string
    /** svg矢量图的名称 */
    name: string
    /** svg图标的颜色 */
    color?: string
    /** svg图标大小 */
    size?: string | number
    /** 图标的样式 */
    style?: Record<string, any> // AnyObject // Record<string, any>
}

withDefaults(defineProps<SvgIconProps>(), {
    prefix: '#icon-',
    color: '',
    size: 16,
    style: () => ({}),
})
</script>

<template>
    <i
        :style="{
            fontSize: `${size || 16}px`,
            ...(style || {}),
        }"
        class="svg-icon"
    >
        <svg :style="{ color }">
            <use :xlink:href="`${prefix}${name}`" />
        </svg>
    </i>
</template>

<style lang="scss" scoped>
.svg-icon {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 1em;
    height: 1em;
    line-height: 1em;
    fill: currentColor;

    svg {
        width: 1em;
        height: 1em;
    }
}
</style>
